<!--
 * @Author: liangbo
 * @Date: 2020-05-12 14:32:44
 * @LastEditTime: 2020-05-15 17:49:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tuyibo\components\Ad.vue
--> 
<template>
<section class="ad">
  <!-- <div class="ad-inner" @click="linkTo(parseInt(bottomBannerList[0].link_type),bottomBannerList[0].id)"><img :src="bottomBannerList[0].thumbnail" alt=""></div> -->
  <div v-if="bottomBannerList.length>0" class="ad-inner" @click="linkTo(bottomBannerList[0])">
    <img :src="'images/'+bottomBannerList[0].thumbnail" style="height:120px;cursor: pointer;" />
  </div>
</section>
</template>

<!--顶部背景图 暂不支持跳转-->
<script>
export default {
  name: "Ad",
  props: ["bottomBannerList"],
  methods: {
    linkTo(obj) {
      var type = parseInt(obj.link_type);
      var key = "";
      if (type === 1) {
        key = "category_id";
      } else if (type === 2) {
        key = "tag_id";
      } else if (type === 3) {
        key = "topic_id";
      } else {
        window.open(obj.link, "_self");
        return;
      }
      this.$router.push({
        name: "list",
        path: "/list",
        query: {
          [key]: obj.link_id,
          title: obj.title
        }
      });
    },

    linkTypeEName(v) {
      if (v === 1) {
        return "Category";
      } else if (v === 2) {
        return "Tag";
      } else if (v === 3) {
        return "Topic";
      } else if (v === 4) {
        return "Link";
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.ad {
    padding: 0 16px;
    margin-bottom: 24px;
    .ad-inner {
        max-width: 1380px;
        margin: 0 auto;
        img {
            width: 100%;
            display: block;
        }
    }
}
</style>
